<template>
  <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  props:['dayTabWaterQualityMonth'],
  data() {
    return {
      chart: null,
      chartList:[],
    }
  },
  watch: {
    dayTabWaterQualityMonth(){
      this.chartList=[]
      for (let i in this.dayTabWaterQualityMonth){
        let list=[]
        let length=0
        for (let j in this.dayTabWaterQualityMonth[i]){
          length +=1
          list.push(this.dayTabWaterQualityMonth[i][j])
        }
        if (length <12){
          for (let j=0;j<12-length;j++){
            list.push(0)
          }
        }
        this.chartList.push(list)
      }

      // this.chartData=[]
      // for (let i in this.waterSoledRatio){
      //   this.chartData.push(this.waterSoledRatio[i])
      // }
      this.initChart()
    },
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     this.setOptions(val);
    //   },
    // },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if(!this.chart ){
      this.chart = echarts.init(this.$el, 'macarons')
      }
      this.chart.setOption ({
        color: ['rgba(25, 255, 162, 1)','rgba(255, 218, 51, 1)','rgba(77, 205, 243, 1)','rgba(255, 0, 0, 1)'],
        title: {
          text: '各因子预警走势',
          left: "3%",
          top: 1,
          textStyle: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            // fontWeight: "bolder",
            fontSize: 12,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['余氯', 'PH值', '浊度', '电导率'],
          padding: [0, 0, 0, 0],
          top: 30,
          left: 0,
          right: 0,
          textStyle: {
            fontSize: 10,
            color: "#fff", // 设置文本颜色 默认#FFF
          },
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
          }
        ],
        yAxis: {
          type: "value",
          scale:true,
          show:true,
          // name: '温/湿度',
          splitNumber:3,
          // interval:4,
        },
        series: [
          {
            name: '余氯',
            type: 'line',
            stack: 'Total1',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(25, 255, 162, 0.7)'
                },
                {
                  offset: 1,
                  color: 'rgb(25, 255, 162, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.chartList[0]
          },
          {
            name: 'PH值',
            type: 'line',
            stack: 'Total2',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 218, 51, 0.7)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 218, 51, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data:this.chartList[1]
          },
          {
            name: '浊度',
            type: 'line',
            stack: 'Total3',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(77, 205, 243, 0.7)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 205, 243, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.chartList[2]
          },
          {
            name: '电导率',
            type: 'line',
            stack: 'Total4',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 0, 0, 0.7)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 0, 0, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.chartList[3]
          }
        ]
      });
    }
  }
}
</script>

